React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.

Hello, I'm grateful that you chose to watch my talk. Thank you. Last week, I had to run some unit tests while I was coding. Business performance can be awesome. It has very interesting and outstanding features. These test sets are overly complex. It's easy to find yourself troubleshooting for hours. VTest has almost 200 configuration options. By explaining how things work, we can answer questions about using complex third-party runners versus the built-in node.js runner. Understanding better helps avoid pitfalls, troubleshoot faster, and identify opportunities for configuring things better. The CLI layer does validation and hands over to the VTest class. It searches for test files, runs them efficiently using a pool of workers, and ensures isolation to prevent issues with dirty state. VTest uses the piscina library to facilitate work with multiple workers and improve performance. The workers prepare by setting the right globals, initializing snapshots, deciding the test runner file, and starting coverage collection. Each worker executes all the tests in a file and sends an RPC message when done. The decision to reuse or create a fresh worker is determined by the isolate configuration option. Consider spreading tests among more files to fully utilize the machine. Choose between process, thread, or VM as the worker type. In terms of isolation, you can choose between using a process, a thread, or a VM. Process is the heaviest in terms of performance cost, while thread is lighter. VM performance depends on known slower aspects like accessing globals. Process is the classic choice for stability, but thread has limitations and known issues. VM has reporting issues with memory leaks. Benchmark results showed that using multiple processes was 50% better for real-world applications, but for unit tests, one process was ten times faster. Thread was slightly faster than process, and VM was slower. The price of isolation with process worker types was approximately three minutes. Without isolation, the tests lasted only two minutes, much faster, but with a few failures. Threads showed similar results with a few failures. The risk of dealing with testing issues increases without isolation. By default, tests run sequentially inside workers, but you can configure them to run in parallel using the 'concurrent' keyword. However, tests still run sequentially despite specifying 'concurrent'. Concurrency in VTest is based on promises and requires asynchronous work. Unit tests run sequentially and concurrency has no isolation. Mocking in one test affects other tests running simultaneously. In choosing worker configurations, it depends on the context. In-file concurrency is best avoided, and the process worker type is recommended as the default. Isolation is crucial in integration tests but not mandatory in unit tests. Inside the worker, a TypeScript file is handled, and failures can occur when mocking functions. Mocking doesn't work in the worker. The worker handles TypeScript files and transpiles them using Vite server. Vite server replaces imports and hoists the mocking. Vite introduces a new module loader in the runtime. Vite hoisted the mock to the first line in the transform code to make it before the import. Additionally, Vite changes mocks to dynamic imports, ensuring that mocking works. Vite intercepts function calls on the file import level, but cannot intercept calls between functions in the same file. Moving function two to a different file or using an object export can solve this issue. Function one calls function two on the same object context. Use Spy to replace functions inside the object. Vite offers a range of plugins for different functionalities. You can fix import issues by customizing Vite's runtime. The Vite server handles dependency resolution and transformation. Consider using the built-in test runner or mockup for small-scale testing. Gain a better testing experience with Vite's customized runtime.

My name is Nicolas, and today, I'm going to talk about Fine-Grain Reactivity without the compiler this time. React is reactive, but it re-renders unnecessary components. Fine-grained reactivity is achieved by updating specific elements instead of whole components. Pigment encountered reactivity problems while building real-time financial data boards. They created their own reactive system on top of React to achieve fine-grained reactivity. They used custom hooks like useShell, useComputed, and useWatch to integrate React with their reactive system. They also considered using native JavaScript for optimization but chose to preserve React. They use external libraries like Zestand for flexibility, and maintaining reactivity during React updates has not been a problem.

Welcome to my talk at React Day Berlin. Today, we'll discuss vector search and embeddings for React developers. Traditional search is broken, resulting in poor user experiences. Converting data into embeddings unlocks more accurate search, content recommendations, and document comparisons. Vector search measures the closeness or similarity of vectors using distances. In vector search, the closest relevant documents are found based on similarities between vectors. There are multiple ways to calculate the distance between data in vector search. Generative AI applications often deal with both textual and image data, making vector search useful. By converting queries and data into vectors, semantic meaning is considered, allowing for more accurate results. React and Next.js developers have access to a range of toolings, including BlankChain and AI SDK from Vercel. Retrieval augmented generation enhances search results by converting data into vectors and generating more coherent text. The user query is converted into a vector and matched using vector search, and the response is generated using the AISDK from Vercel.

I want to talk about the importance of testing and how it can improve the developer experience. Lack of tests can lead to issues and breakdowns in productivity. The challenges of using TDD and testing last are discussed, along with the benefits of writing tests early. Effective tests provide valuable feedback and save time. Prioritizing user-focused testing and using tests as documentation are recommended. Tests should resemble user behavior, and enhancing testing capabilities with linters and custom matchers is suggested. Advanced testing techniques can improve developer productivity.

Today's Talk discusses the integration of TypeScript in Node.js. The path to native TypeScript in Node.js is explored, including the history of user requests for native support. Implementing TypeScript in Node.js poses challenges due to differences in stability guarantees and tool compatibility. TypeStripping is a transpilation-focused implementation that removes non-JavaScript features, making it stable across TypeScript versions. The Amaro package, built on SWC, provides compatibility and speed for type stripping. Experimental Strip Types and Transform Types flags enable erasable TypeScript features. TypeScript has limitations such as namespace and enum support in JavaScript and code migration issues. TypeScript Import Types and Syntax Detection are ongoing developments. Ambiguity in syntax between JavaScript and TypeScript is addressed with an erasable syntax only flag. Future steps include bug fixing, performance improvements, and upcoming Node.js releases.

Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.

I'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.

Today's Talk is about making Hono work on Node.js. Hono is a backend for web frameworks that supports TypeScript. It started as a Cloudflare workers framework and now supports multiple runtimes. The Node.js adapter allows Hono applications to run in Node.js by converting Node.js APIs into web standard APIs. Benchmark tests show that Hono is faster than Express but slower in some core areas. The Node.js adapter has been widely used and has undergone performance improvements. Overall, adding Node.js support to Hono has been successful in reaching more users and improving quality.